<!-- Navbar -->
<nav
  class="navbar navbar-expand-lg navbar-transparent navbar-absolute fixed-top"
>
  <div class="container-fluid">
    <button
      class="navbar-toggler"
      type="button"
      data-toggle="collapse"
      aria-controls="navigation-index"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="sr-only">Toggle navigation</span>
      <span class="navbar-toggler-icon icon-bar"></span>
      <span class="navbar-toggler-icon icon-bar"></span>
      <span class="navbar-toggler-icon icon-bar"></span>
    </button>

    <div class="collapse navbar-collapse justify-content-end">
      {% if request.user.is_authenticated %}
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="/history">
            <p class="d-lg-none d-md-block">Stats</p>
          </a>
        </li>

        <li class="nav-item dropdown">
          <a
            class="nav-link"
            href="/user_info"
            id="navbarDropdownProfile"
            data-toggle="dropdown"
            aria-haspopup="true"
            aria-expanded="false"
          >
            <p class="d-lg-none d-md-block">Account</p>
          </a>
          <div
            class="dropdown-menu dropdown-menu-right"
            aria-labelledby="navbarDropdownProfile"
          >
            <a class="dropdown-item" href="/page-user.html">Profile</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="{% url 'logout' %}">Log out</a>
          </div>
        </li>
      </ul>

      {% endif %}
    </div>
  </div>
</nav>
